.arco-menu-light {
    --color-menu-light-bg: var(--layout-bg-color) !important;
   /* --color-menu-light-bg: var(--sub-menu-bg-color) !important;       */
   /*  background: var(--color-menu-light-bg)!important;    */
    background:transparent !important;
}


.arco-menu-item.arco-menu-selected {
    background: var(--menu-active-bg-color) !important;
    box-shadow: var(--menu-box-shadow);
    border-radius: 8px;
    color: #fff !important;

    .arco-icon {
        color: var(--menu-text-color) !important;
    }

    .arco-menu-icon {
        color: var(--menu-text-color) !important;
    }
}

:deep(.arco-menu-inline-header.arco-menu-selected) {
    border-radius: 8px;
    color: var(--menu-text-color) !important;
    font-weight: 500;
    .arco-icon {
        color: var(--menu-text-color) !important;
    }

    .arco-menu-icon {
        color: var(--menu-text-color) !important;
    }
}

:deep(.arco-menu-light .arco-menu-inline-header.arco-menu-selected:hover )
{
    background-color: var(--menu-active-bg-color) !important;
}

.arco-menu-light .arco-menu-item,
.arco-menu-light .arco-menu-group-title,
.arco-menu-light .arco-menu-pop-header,
.arco-menu-light .arco-menu-inline-header {
    color: var(--menu-text-color) !important;
    background-color: transparent;
}
.arco-menu-light .arco-menu-item .arco-icon{
    color: var(--menu-text-color) !important;
}

.arco-menu-light .arco-menu-item:hover,
.arco-menu-light .arco-menu-inline-header:hover {
    background: var(--menu-active-bg-color) !important;
    color: var(--menu-text-color) !important;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.arco-menu-light .arco-menu-item,
.arco-menu-light .arco-menu-group-title,
.arco-menu-light .arco-menu-pop-header,
.arco-menu-light .arco-menu-inline-header {
    /* background: var(--menu-active-bg-color) !important; */
    color: var(--menu-text-color) !important;
}

.arco-menu-light .arco-menu-inline-header {
    color: var(--menu-text-color) !important;
    background-color: transparent !important;
}
.arco-menu-light .arco-menu-item,
.arco-menu-light .arco-menu-group-title,
.arco-menu-light .arco-menu-pop-header,
.arco-menu-light .arco-menu-inline-header {
    color: var(--menu-text-color) !important;
    background-color: var(--color-menu-light-bg);
}

.arco-menu-light .arco-menu-inline-header .arco-menu-icon {
    color: var(--menu-text-color) !important;
}

.arco-menu-light .arco-menu-item .arco-icon,
.arco-menu-light .arco-menu-group-title .arco-icon,
.arco-menu-light .arco-menu-pop-header .arco-icon,
.arco-menu-light .arco-menu-inline-header .arco-icon,
.arco-menu-light .arco-menu-item .arco-menu-icon,
.arco-menu-light .arco-menu-group-title .arco-menu-icon,
.arco-menu-light .arco-menu-pop-header .arco-menu-icon,
.arco-menu-light .arco-menu-inline-header .arco-menu-icon {
    color: var(--menu-text-color) !important;
}
